<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar">
			<view class="status-info">
				<text class="time">12:00</text>
				<view class="status-icons">
					<view class="signal-icon">📶</view>
					<view class="wifi-icon">WiFi</view>
					<view class="battery-icon">🔋</view>
				</view>
			</view>
		</view>

		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @click="goBack">❮</view>
			<text class="title">我的金币</text>
		</view>

		<!-- 金币余额卡片 -->
		<view class="coin-card">
			<view class="coin-info">
				<text class="coin-label">可用金币 (个)</text>
				<text class="coin-amount">30,000</text>
			</view>
			<view class="rule-btn" @click="showRule">规则说明</view>
		</view>

		<!-- 标签页 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: currentTab === 'income' }" @click="changeTab('income')">金币收入</view>
			<view class="tab-item" :class="{ active: currentTab === 'expenditure' }" @click="changeTab('expenditure')">
				金币支出</view>
		</view>

		<!-- 金币记录列表 -->
		<view class="record-list">
			<block v-for="(record, index) in filteredRecords" :key="index">
				<view class="record-item">
					<view class="record-info">
						<text class="record-title">{{ record.title }}</text>
						<text class="record-time">{{ record.time }}</text>
					</view>
					<text :class="['record-amount', currentTab === 'income' ? 'income-amount' : 'expenditure-amount']">
						{{ currentTab === 'income' ? '+' : '-' }}{{ record.amount }}
					</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// 当前选中的标签
	const currentTab = ref('income');

	// 金币记录数据
	const coinRecords = ref([{
			title: '发布图文',
			time: '2098-11-24 18:51',
			amount: '100',
			type: 'income'
		},
		{
			title: '发布视频',
			time: '2098-11-23 10:50',
			amount: '200',
			type: 'income'
		},
		{
			title: '发布图文',
			time: '2098-11-22 12:21',
			amount: '100',
			type: 'income'
		},
		{
			title: '发布视频',
			time: '2098-11-21 10:51',
			amount: '200',
			type: 'income'
		},
		{
			title: '发布图文',
			time: '2098-11-19 10:55',
			amount: '100',
			type: 'income'
		},
		{
			title: '发布视频',
			time: '2098-11-17 12:19',
			amount: '200',
			type: 'income'
		},
		{
			title: '发布视频',
			time: '2098-11-12 10:51',
			amount: '200',
			type: 'income'
		},
		// 可以添加支出记录
		// { title: '兑换奖品', time: '2098-11-10 15:30', amount: '500', type: 'expenditure' }
		{
			title: '支付抵扣金币-门票',
			time: '2098-11-24 18:51',
			amount: '89,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-机票',
			time: '2098-11-23 10:50',
			amount: '60,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-酒店',
			time: '2098-11-22 12:21',
			amount: '59,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-汽车票',
			time: '2098-11-21 10:51',
			amount: '89,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-门票',
			time: '2098-11-19 10:55',
			amount: '60,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-门票',
			time: '2098-11-17 12:19',
			amount: '59,400',
			type: 'expenditure'
		},
		{
			title: '支付抵扣金币-门票',
			time: '2098-11-12 10:51',
			amount: '32,400',
			type: 'expenditure'
		},
	]);

	// const coinRecords = ref([

	//   // 可以添加收入记录
	//   // { title: '发布图文', time: '2098-11-24 18:51', amount: '100', type: 'income' },
	// ]);

	// 根据当前标签过滤记录
	const filteredRecords = computed(() => {
		return coinRecords.value.filter(record => record.type === currentTab.value);
	});

	// 切换标签
	const changeTab = (tab) => {
		currentTab.value = tab;
	};

	// 显示规则说明
	const showRule = () => {
		uni.showToast({
			title: '这里是规则说明内容',
			icon: 'none'
		});
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	/* 状态栏 */
	.status-bar {
		height: 30px;
		background-color: #fff;
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.status-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.time {
		font-size: 14px;
		color: #333;
	}

	.status-icons {
		display: flex;
		align-items: center;
	}

	.signal-icon,
	.wifi-icon,
	.battery-icon {
		margin-left: 10px;
		font-size: 14px;
	}

	/* 导航栏 */
	.nav-bar {
		height: 44px;
		background-color: #fff;
		padding: 0 15px;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.back-icon {
		font-size: 24px;
		color: #333;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-left: 50%;
		transform: translateX(-50%)
	}

	/* 金币卡片 */
	.coin-card {
		margin: 10px;
		padding: 15px;
		background: linear-gradient(to right, #ff9a34, #ffad66);
		border-radius: 10px;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coin-info {
		flex: 1;
	}

	.coin-label {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.coin-amount {
		font-size: 28px;
		font-weight: bold;
	}

	.rule-btn {
		font-size: 12px;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 15px;
		padding: 3px 10px;
	}

	/* 标签页 */
	.tab-bar {
		height: 40px;
		background-color: #fff;
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #666;
		padding-bottom: 5px;
	}

	.tab-item.active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}

	/* 记录列表 */
	.record-list {
		padding: 0 10px;
	}

	.record-item {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 1px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-info {
		flex: 1;
	}

	.record-title {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.record-time {
		font-size: 12px;
		color: #999;
	}

	.record-amount {
		font-size: 16px;
		font-weight: bold;
	}

	.income-amount {
		color: #ff9a34;
	}

	.expenditure-amount {
		color: #ff6b6b;
	}
</style>